<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/common/plantillaPrincipal.xhtml">
	<ui:define name="title">Sistema de Ventas - Intradevco </ui:define>
	<ui:define name="cuerpo">
		<ui:include src="../common/menu.xhtml" />

		<p:growl id="growl" showDetail="true" life="4000" />

		<!-- Panel Principal -->

		<div class="panelAdministracion">
			<h:form id="form">

				<!-- DataTable de productos -->

				<p:dataTable var="producto"
					value="#{productoController.listaProductos}" id="listaProductos"
					widgetVar="listaProductos" paginator="true" rows="7"
					emptyMessage="No se encontraron registros.">

					<f:facet name="header">
						<h:panelGrid columns="1">
							Lista de Productos
							<p:outputPanel style="float:right;">
								<h:outputText value="Búsqueda :    " />
								<p:inputText id="globalFilter" onkeyup="listaProductos.filter()"
									style="width:150px" />
							</p:outputPanel>
						</h:panelGrid>
					</f:facet>

					<p:column headerText="Código" filterBy="#{producto.codigo}"
						filterStyleClass="oculto">
						<h:outputText value="#{producto.codigo}" />
					</p:column>

					<p:column headerText="Descripción"
						filterBy="#{producto.descripcion}" filterStyleClass="oculto">
						<h:outputText value="#{producto.descripcion}" />
					</p:column>

					<p:column headerText="Stock" filterBy="#{producto.stock}"
						filterStyleClass="oculto">
						<h:outputText value="#{producto.stock}" />
					</p:column>

					<p:column headerText="Und. Medida"
						filterBy="#{producto.unidadMedida}" filterStyleClass="oculto">
						<h:outputText value="#{producto.unidadMedida}" />
					</p:column>

					<p:column headerText="Precio" filterBy="#{producto.precio}"
						filterStyleClass="oculto">
						<h:outputText value="#{producto.precio}" />
					</p:column>

					<p:column style="width:30px">
						<p:commandButton update=":editarForm:editarPanel,editarDialog"
							oncomplete="editar.show()" image="ui-icon ui-icon-pencil">
							<f:setPropertyActionListener value="#{producto}"
								target="#{productoController.productoSeleccionado}" />
						</p:commandButton>
					</p:column>

					<p:column style="width:30px">
						<p:commandButton update="eliminarDialog"
							oncomplete="eliminar.show()" image="ui-icon ui-icon-trash">
							<f:setPropertyActionListener value="#{producto}"
								target="#{productoController.productoSeleccionado}" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

				<!-- Boton para agregar productos -->
				<p:commandButton style="float:left;" value="Agregar producto"
					update="listaProductos" image="ui-icon ui-icon-plus"
					oncomplete="agregar.show()" />


				<!-- Dialogo para confirmar eliminacion de produtos -->

				<p:confirmDialog id="eliminarDialog" widgetVar="eliminar"
					header="Eliminar producto" modal="true" closable="false"
					message="¿Está seguro que desea eliminar el producto?">
					<p:commandButton value="Sí, estoy seguro"
						update="listaProductos,growl" oncomplete="eliminar.hide()"
						actionListener="#{productoController.eliminarProducto}" />
					<p:commandButton value="¡No lo hagas!" onclick="eliminar.hide()" />
				</p:confirmDialog>

			</h:form>

			<!-- Dialogo para editar produtos -->

			<h:form id="editarForm">
				<p:dialog widgetVar="editar" id="editarDialog" modal="true"
					header="Modificar Producto" closable="false">
					<h:panelGrid columns="2" id="editarPanel">
						<h:outputText value="Código" />
						<p:inputText disabled="true" readonly="true"
							value="#{productoController.productoSeleccionado.codigo}" />


						<h:outputText value="Descripción" />
						<p:inputText required="true"
							requiredMessage="Es necesario ingresar una descripción"
							value="#{productoController.productoSeleccionado.descripcion}" />

						<h:outputText value="Precio" />
						<p:inputText required="true"
							requiredMessage="Es necesario ingresar un precio"
							value="#{productoController.productoSeleccionado.precio}" />


						<f:facet name="footer">
							<p:commandButton value="Guardar"
								oncomplete="validarEdicion(xhr,status,args)" update="mensaje" />
							<p:commandButton value="Cancelar" onclick="editar.hide()" />
							<p:messages id="mensaje" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>

				<p:remoteCommand name="actualizarFormPrincipalEditar"
					actionListener="#{productoController.editarProducto}"
					update="growl,:form:listaProductos" />

			</h:form>


			<!-- Dialogo para agregar productos-->

			<h:form id="agregarForm">
				<p:dialog widgetVar="agregar" id="agregarDialog" modal="true"
					header="Agregar producto" closable="false">
					<h:panelGrid columns="2" id="agregarPanel">
						<h:outputText value="Descripción" />
						<p:inputText required="true"
							requiredMessage="Es necesario ingresar una descripción"
							value="#{productoController.nuevoProducto.descripcion}" />

						<h:outputText value="Precio" />
						<p:inputText required="true"
							requiredMessage="Es necesario ingresar un precio"
							value="#{productoController.nuevoProducto.precio}" />

						<h:outputText value="Unidad de medida" />
						<h:selectOneMenu
							value="#{productoController.nuevoProducto.unidadMedida}">
							<f:selectItems value="#{listas.listaUnidadesMedida}"
								var="unidadMedida" itemLabel="#{unidadMedida.descripcion}"
								itemValue="#{unidadMedida.descripcion}" />
						</h:selectOneMenu>

						<h:outputText value="Stock" />
						<p:inputText required="true"
							requiredMessage="Es necesario ingresar un precio"
							value="#{productoController.nuevoProducto.stock}" />

						<f:facet name="footer">
							<p:commandButton value="Guardar"
								oncomplete="validarIngreso(xhr,status,args)" update="mensaje" />
							<p:commandButton value="Cancelar" onclick="agregar.hide()" />
							<p:messages id="mensaje" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>

				<p:remoteCommand name="actualizarFormPrincipalAgregar"
					actionListener="#{productoController.agregarProducto}"
					update="growl,:form:listaProductos" />

			</h:form>

		</div>

		<script type="text/javascript">
		function validarEdicion(xhr, status, args) {  
	        if(!args.validationFailed) {  
	        	editar.hide();
	        	actualizarFormPrincipalEditar();
	        	status=true;
	        }  
	    }  

		function validarIngreso(xhr, status, args) {  
	        if(!args.validationFailed) {  
	        	agregar.hide();
	        	actualizarFormPrincipalAgregar();
	        	status=true;
	        }  
	    }  
		</script>
	</ui:define>


</ui:composition>


